<template>
  <div class="comments">
    <div class="head_info">
      <div class="score">
        <span><b>{{ comments.avg_score }}</b>/5</span>
        <div class="score_stars">
          <b :style="{width: (5 - comments.avg_score) / 5  * 100 + '%'}" ></b>
          <img src="@/assets/stars.png" alt="">
        </div>
      </div>
      <div class="rate clearfix">
        <div class="item_rate good flex">
          <span>好评：</span>
          <div class="item">
            <div :style="{width: comments.A / comments.count * 100 + '%' || 0}"></div>
          </div>
          <b>{{ parseInt(comments.A / comments.count * 100)  || 0 }}%</b>
        </div>
        <div class="item_rate medium flex">
          <span>中评：</span>
          <div class="item">
            <div :style="{width: comments.B / comments.count * 100 + '%'  || 0}"></div>
          </div>
          <b>{{ parseInt(comments.B / comments.count * 100) || 0 }}%</b>
        </div>
        <div class="item_rate bad flex">
          <span>差评：</span>
          <div class="item">
            <div :style="{width: comments.C / comments.count * 100 + '%' || 0}"></div>
          </div>
          <b>{{ parseInt(comments.C / comments.count * 100) || 0 }}%</b>
        </div>
      </div>
    </div>
    <p>茶友点评(<span>{{ comments.count }}</span>)</p>
    <span v-show="comments.count === '0'" class="no_cmts">该商品还没有试饮报告</span>
    <comments v-for="(item,index) in comments.comment_list" :key="index" :item-comment="item"></comments>
  </div>
</template>

<script>
import comments from "@/components/comments_item";
import { countView, wxCodeLogin, getSign } from "@/api/index.js";
import { getComments, addComments } from "@/api/chayang.js";
export default {
  data() {
    return {
      comments: []
    };
  },
  props: ['goodid', 'code'],
  created() {
    wxCodeLogin(this.code);
    getComments(this.goodid, 0, 10).then(results => {
      this.comments = results.data;
    });
  },
  components: {
    comments
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.comments {
  background-color: #fff;
  padding: 0 to(18);
  .head_info {
    margin-bottom: to(40);
    .score {
      font-size: to(34);
      .score_stars {
        background-color: #aa0000;
        display: inline-block;
        position: relative;
        img {
          display: block;
          width: to(150);
          // position: absolute;
          z-index: 1;
          position: relative;
        }
        b {
          position: absolute;
          height: 100%;
          background-color: #ccc;
          z-index: 0;
          right: 0;
          top: 0;
          font-size: to(34);
          line-height: to(52);
          overflow: hidden;
        }
      }
      b {
        color: #aa0000;
        font-size: to(46);
        font-weight: normal;
      }
      span {
        line-height: to(76);
        &:nth-child(2) {
          color: #aa0000;
          // font-size: to(50);
        }
      }
    }
    .rate {
      // display: -webkit-flex;
      width: 100%;
      .item_rate {
        float: left;
        width: 50%;
        margin-bottom: to(10);
        height: to(50);
        span {
          font-size: to(22);
          color: #212121;
          flex: 2;
          margin-right: to(10);
          line-height: to(50);
        }
        .item {
          flex: 4;
          height: to(18);
          margin-top: to(13);
          background-color: #bababa;
          position: relative;
          div {
            width: 0;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background-color: #aa0000;
          }
        }
        b {
          flex: 2;
          font-size: to(20);
          font-weight: normal;
          padding-left: to(16);
          line-height: to(50);
        }
      }
    }
  }
  p {
    font-size: to(26);
    line-height: to(40);
    height: to(40);
    position: relative;
    padding-left: to(24);
    margin-bottom: to(40);
    &::before {
      content: "";
      position: absolute;
      top: 13%;
      left: 0;
      width: to(8);
      height: 74%;
      background-color: #aa0000;
    }
    span {
      color: #aa0000;
    }
  }
  .no_cmts {
    font-size: to(32);
    color: #666;
  }
}
</style>
